<template>
    <layout>
        <div class="wrapper">
            <div class="info">
                <van-cell-group>
                    <van-cell title="申请人：" :value="dataInfo.applyUser"></van-cell>
                    <van-cell title="预约编号：" :value="applyId+'号'"></van-cell>
                    <van-cell title="身份证号：" :value="dataInfo.idCard"></van-cell>
                    <van-cell title="联系人电话：" :value="dataInfo.linkPhone"></van-cell>
                    <van-cell title="采样员：" :value="dataInfo.collectUserName"></van-cell>
                    <van-cell title="采样电话：" :value="dataInfo.collectPhone"></van-cell>
                    <van-cell title="采样时间：" :value="dataInfo.applyTime"></van-cell>
                    <van-cell title="采样地址：" :value="dataInfo.address"></van-cell>
                </van-cell-group>
                <van-row class="enter" type="flex" justify="space-between" align="center">
                    <van-col class="people">
                        已录{{dataInfo.existNum}}人
                    </van-col>
                    <van-col>
                        <van-button type="primary" size="small" @click.native="viewApplyUsers">
                            点击查看
                        </van-button>
                    </van-col>
                </van-row>
            </div>

            <div class="qrcode-container">
                <div class="qrcode-wrapper" v-show="applyId">
                    <div ref="qrcodeOne">

                    </div>
                    <div class="name">
                        核酸上门-二维码
                    </div>
                </div>
                <div class="qrcode-wrapper" v-show="applyUserId">
                    <div ref="qrcodeTwo">

                    </div>
                    <div class="name">
                        核酸上门-个人信息二维码 No.{{applyUserId}}
                    </div>
                </div>
            </div>

        </div>
    </layout>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import QRcode from "qrcodejs2"
import ApplyDetailApi from "@/api/applyDetail"
export default {
  name:"applyDetail",
// import引入的组件需要注入到对象中才能使用
  components: {},
  data  () {

// 这里存放数据
    return {
        applyId:"",
        applyUserId:"",
        openId:"",
        dataInfo:{
            // applyUser:"",
            // idCard:"",
            // linkPhone:"",
            // applyUser:"",
            // applyPhone:"",
            // applyTime:"",
            // address:"",
            // existNum:"",
            // isApplicant:"",
        }

    }
  },
// 监听属性 类似于data概念
  computed: {},
// 监控data中的数据变化
  watch: {},
// 方法集合
  methods: {
    // 初始化
    init(){
        // if(this.$route.query.openId&&this.$route.query.applyId){
            this.openId = this.$route.query.openId
            this.applyId = this.$route.query.applyId||""
            this.getData()
        // }

    },
    // 获取基本信息
    getData(){
        let params = {
            openId:this.openId||false,
            applyId:this.applyId||false
        }
        ApplyDetailApi.getApplyInfo(params).then(res=>{
            if(res.status==0){
                this.dataInfo = res.data
                this.dataInfo.applyUser = res.data.isApplicant?res.data.linkMan:res.data.name
                this.createQrcde(this.applyId,res.data.applyUserId)
            }else{
                this.$dialog.alert({
                    title:"提示",
                    message:res.msg
                })
            }
        })
    },
    // 生成二维码函数
    createQrcde(applyId,applyUserId){
      var defaultContent = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe7229f039bfe873b&redirect_uri=http%3A%2F%2Fh5.kanglailab.com%2FnucleicMessage&response_type=code&scope=snsapi_base&state='; // 路径
      new QRcode(this.$refs.qrcodeOne,{
        text: defaultContent+applyId,
        width:220,
        height:220,
        correctLevel:3
      })
      if(applyUserId){
        new QRcode(this.$refs.qrcodeTwo,{
            text: applyUserId,
            width:220,
            height:220,
            correctLevel:3
        })
        this.applyUserId = applyUserId
      }
    },
    viewApplyUsers(){
        if(this.dataInfo.isApplicant==0){
            this.$router.push({
                path:"applyUserList",
                query:{
                    applyId:this.applyId,
                    openId:this.openId
                }
            })
        }else{
            this.$router.push({
                path:"applyUserList",
                query:{
                    applyId:this.applyId,
                }
            })
        }
    }
  },
// 生命周期 - 创建完成（可以访问当前this实例）
  created  () {

  },
// 生命周期 - 挂载完成（可以访问DOM元素）
  mounted  () {
    this.init()
  },
  beforeCreate  () {}, // 生命周期 - 创建之前
  beforeMount  () {}, // 生命周期 - 挂载之前
  beforeUpdate  () {}, // 生命周期 - 更新之前
  updated  () {}, // 生命周期 - 更新之后
  beforeDestroy  () {}, // 生命周期 - 销毁之前
  destroyed  () {}, // 生命周期 - 销毁完成
  activated  () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.wrapper{
    width: 93%;
    margin: 0 auto;
    .info{
        padding: 0 5px;
        background-color: white;
        margin: 10px 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 10%);
        .enter{
            margin: 10px 16px;
            font-size: 14px;
            .people{
                color: red;
            }
        }
    }
    .qrcode-container{
        background-color: white;
        margin: 10px 0;
        border-radius: 10px;
        padding: 20px 0;
        overflow: hidden;
        text-align: center;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 10%);

        .qrcode-wrapper{
            &:first-of-type{
                margin-bottom: 40px;
            }
            width: 220px;
            // height: 170px;
            margin: 0 auto;
            .qrcodeOne,.qrcodeTwo{
                width: 220px;
            }
            &::v-deep{
                img{
                width: 100%;
                }
            }
            .name{
                margin: 10px 0;
                font-size: 18px;
            }
        }
    }
}

</style>
